<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vue2的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.12/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>金庸小说坏人榜</p>
      <ul>
        <!-- item 遍历到的每一个数组中的元素 -->
        <!-- <li v-for="item in badPersons" :key="item.id">
          {{ item.name }} {{ item.address }}
        </li> -->
        <!-- 带有索引的数组渲染 -->
        <!-- <li v-for="(item,index) in badPersons" :key="item.id"> -->
        <li v-for="(item,index) in badPersons" :key="`first-${index}`">
          {{ index + 1 }} {{ item.name }} {{ item.address }}
          <input type="checkbox" />
        </li>
        <hr />

        <li v-for="(item,index) in badPersons" :key="`second-${index}`">
          {{ index + 1 }} {{ item.name }} {{ item.address }}
          <input type="checkbox" />
        </li>

        <button @click="add">加一个人</button>

        <!-- 遍历对象 -->
        <!-- <li v-for="(value,name) in testObj">{{ name }} {{ value }}</li> -->
      </ul>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          badPersons: [
            // { id: 1001, name: '岳不群', address: '华山' },
            // { id: 1002, name: '金轮法王', address: '蒙古' },
            // { id: 1003, name: '尹志平', address: '武当山' },
            // { id: 1004, name: '欧阳锋', address: '西域' }
            { name: '岳不群', address: '华山' },
            { name: '金轮法王', address: '蒙古' },
            { name: '尹志平', address: '武当山' },
            { name: '欧阳锋', address: '西域' }
          ],
          testObj: {
            name: '张三',
            age: 90,
            sex: '男'
          }
        },
        methods: {
          add() {
            // console.log('---add---')
            this.badPersons.unshift({
              id: 1000,
              name: '成昆',
              address: '光明顶'
            })
            // setTimeout(() => {
            //   this.badPersons.splice(2, 0, {
            //     id: 1000,
            //     name: '成昆',
            //     address: '光明顶'
            //   })
            // }, 1000)
          }
        }
      })
    </script>
  </body>
</html>
